<template>
  <div class="venus-list-page">
    <!--签约查询界面-->
    <div class="page-search">
      <el-form label-width="160px" style="margin: 20px 50px 20px 0px;" size="mini">
        <el-row type="flex" class="list-items">
          <el-col :span="8">
            <el-form-item label="模板名称:">
              <el-input v-model="table.upload_table.temp_name" class="venus-input-middle" placeholder="请输入债券名称" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="模板类型:">
              <el-select v-model="table.upload_table.temp_type" class="venus-input-middle" placeholder="--请选择--">
                <el-option v-for="item in dict.tempType" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div class="venus-btn-box" style="text-align: center;">
            <el-button type="success" @click="search">查询</el-button>
            <el-button type="info" plain @click="resetForm">重置</el-button>
            <el-button type="success" @click="addBean">上传</el-button>
            <el-button type="success" @click="addBean">模板初始化</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果</div>
      </el-row>
      <table-pagination :table-data="table.upload_table.tableData" :table-header-config="table.tableHeaderConfig"
        highlight-current-row :total="table.upload_table.total" :page-size="table.upload_table.limit" :now-page="table.upload_table.nowPage"
        :operation-config="table.operationConfig" @current-change="handleCurrentChange" />
    </div>

    <!-- 上传文档模态框 -->
    <el-dialog :title="form.upload.title" :visible.sync="form.upload.dialogFormVisible">
      <el-upload class="upload-demo" ref="upload" action="https://xxx" :on-preview="handlePreview" :before-upload="add_Beforeupload"
        :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" accept=".docx" :auto-upload="false">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <el-form :model="form.temp_upload" size="mini" :rules="form.temp_rules" ref="temp_upload">
        <el-input type='hidden' v-model="form.temp_upload.id" />
        <el-row type="flex">
          <el-col>
            <el-form-item label="模板类型" :label-width="style.formLabelWidth" prop="temp_type">
              <el-select v-model="form.temp_upload.temp_type" placeholder="请选择">
                <el-option v-for="item in dict.tempType" :label="item.value +'-'+item.text" :value="item.value +'-'+item.text" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="模板子类型" :label-width="style.formLabelWidth" prop="temp_son_type">
              <el-select v-model="form.temp_upload.temp_son_type" placeholder="请选择">
                <el-option v-for="item in dict.tempSonType" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-form-item label="文档命名规则" :label-width="style.formLabelWidth" prop="name_rule">
            <el-input v-model="form.temp_upload.name_rule" />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="success" @click="addOk('temp_upload')">提交</el-button>
        <el-button type="info" @click="form.upload.dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改文档模态框 -->
    <el-dialog :title="form.edit.title" :visible.sync="form.edit.dialogFormVisible">
      <el-upload class="upload-demo" ref="upload" action="https://xxx" :on-preview="handlePreview" :before-upload="add_Beforeupload"
        :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" accept=".docx" :auto-upload="false">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <el-form :model="form.temp_upload" size="mini" :rules="form.temp_rules" ref="temp_edit">
        <el-input type='hidden' v-model="form.temp_upload.id" />
        <el-row type="flex">
          <el-col>
            <el-form-item label="模板类型" :label-width="style.formLabelWidth" prop="temp_type">
              <el-select v-model="form.temp_upload.temp_type" placeholder="请选择">
                <el-option v-for="item in dict.tempType" :label="item.value +'-'+item.text" :value="item.value +'-'+item.text" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="模板子类型" :label-width="style.formLabelWidth" prop="temp_son_type">
              <el-select v-model="form.temp_upload.temp_son_type" placeholder="请选择">
                <el-option v-for="item in dict.tempSonType" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-form-item label="文档命名规则" :label-width="style.formLabelWidth" prop="name_rule">
            <el-input v-model="form.temp_upload.name_rule" />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="success" @click="editOk('temp_edit')">提交</el-button>
        <el-button type="info" @click="form.edit.dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  /* 自定义数据加载 */
  import request from '@/utils/request'
  import * as kk from '@/utils/k-utils'
  import '@/utils/directives'
  export default {
    name: 'BondInfo',
    data() {
      return {
        param: '', //表单要提交文件
        dict: {
          tempType: [],
          tempType_edit: [],
          tempSonType: []
        },
        table: {
          operationConfig: { // 表格操作配置
            fixed: 'left',
            width: 300,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              {
                value: '数据源',
                func: this.myModify
              },
              {
                value: 'echarts图表',
                func: this.myModify
              },
              {
                value: '导出',
                func: this.myModify
              },
              {
                value: '修改',
                func: this.myModify
              },
              {
                value: '删除',
                func: this.myDelete
              }
            ]
          },
          tableHeaderConfig: [ // 表头配置
            {
              prop: 'temp_type_name',
              label: '模板类型'
            },
            {
              prop: 'temp_son_type_name',
              label: '模板子类型'
            },
            {
              prop: 'temp_name',
              label: '模板名称'
            },
            {
              prop: 'name_rule',
              label: '命名规则'
            },
            {
              prop: 'inputuser',
              label: '上传者'
            },
            {
              prop: 'upload_date',
              label: '上传日期'
            }
          ],
          upload_table: {
            limit: 5,
            total: 0,
            nowPage: 0,
            tableData: [], // 表格数据
            exeid: 'QUERYTEMPINFO',
            temp_name: '',
            temp_type: ''
          }
        },
        //模态框数据
        form: {
          upload: {
            title: '模板上传',
            dialogFormVisible: false
          },
          edit: {
            title: '模板修改',
            dialogFormVisible: false
          },
          temp_upload: {
            id: '',
            temp_type: '',
            temp_son_type: '',
            name_rule: ''

          },
          temp_rules: {
            temp_type: [{
              required: true,
              message: '该项不允许为空',
              trigger: 'blur'
            }]
          }
        },
        style: {
          formLabelWidth: '130px',
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      //初始化
      init: function() {
        var params = {}
        kk.k_load_exeid('file', 'QUERYTEMPTYPEDICT', params).then(rep => {
          if (rep.rows.length > 0) {
            this.dict.tempType = rep.rows
          }
        })

        //加载表格数据
        this.table.upload_table.nowPage = 1
        kk.k_load_table(this, 'upload_table', 'file')
      },
      //搜索
      search() {
        this.table.upload_table.nowPage = 1
        kk.k_load_table(this, 'upload_table', 'file')
      },
      //修改
      myModify(item, index) {
        this.form.edit.dialogFormVisible = true
        var  temp_type_param = item.temp_type
        //给表单赋值
       this.copyObj(item, this.form.temp_upload)
       //给tempType_edit赋值
     /*  if (this.dict.tempType.length > 0) {
        for (var i = 0; i< this.dict.tempType.length; i++){
          if (i == item.temp_type){
            temp_type_param += "-" + this.dict.tempType[i].text
          }
         this.dict.tempType_edit[i].text = this.dict.tempType[i].value+"-"+this.dict.tempType[i].text
         this.dict.tempType_edit[i].value = this.dict.tempType[i].value+"-"+this.dict.tempType[i].text
        } */
        for (var i = 0; i < this.dict.tempType.length; i++){
          if (temp_type_param == i) {
            temp_type_param += "-" + this.dict.tempType[i].text
          }
        }
       //给文档类型赋值
       this.form.temp_upload.temp_type = temp_type_param
      },
      //删除
      myDelete(item, index) {
        kk.k_update_exeid('file', 'DELETETEMPINFO', item).then(rep => {
         if (rep.success) {
           //重新加载表格
           kk.k_load_table(this, 'upload_table', 'file')
         }
        })
      },
      //重置
      resetForm() {
        this.table.upload_table.temp_name = null
        this.table.upload_table.temp_type = null
      },
      addBean() {
        this.form.upload.dialogFormVisible = true
        /* this.$refs['temp_upload'].resetFields() */
      },
      //分页点击
      handleCurrentChange(val) {
        this.table.upload_table.nowPage = val
        kk.k_load_table(this, 'upload_table', 'file')
      },
      //文件移除
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      add_Beforeupload(file) {
        this.param = file
        return false
      },
      //上传表单
      addOk(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$refs['upload'].submit()
            let formData = new FormData();
            formData.append('temp_type', this.form.temp_upload.temp_type);
            formData.append('temp_son_type', this.form.temp_upload.temp_son_type);
            formData.append('name_rule', this.form.temp_upload.name_rule);
            formData.append('file', this.param);

            request.post('/file/tempUpload.action', formData, {
              headers: {
                'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarytBZPLWT7Amuzzotw'
              }
            }).then(resp => {
              if (resp.success) {
               this.form.upload.dialogFormVisible = false
               //重新加载表格
               kk.k_load_table(this, 'upload_table', 'file')
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      //修改表单
      editOk(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$refs['upload'].submit()
            let formData = new FormData();
            formData.append('temp_type', this.form.temp_upload.temp_type);
            formData.append('id', this.form.temp_upload.id);
            formData.append('temp_son_type', this.form.temp_upload.temp_son_type);
            formData.append('temp_son_type_key', '');
            formData.append('name_rule', this.form.temp_upload.name_rule);
            formData.append('file', this.param);
             if (this.param) {
              formData.append('has_file', '1');
              formData.append('is_upload_file', 'on');
             }else {
               formData.append('has_file', '0');
             }
            request.post('/file/tempUploadUpdate.action', formData, {
              headers: {
                'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarytBZPLWT7Amuzzotw'
              }
            }).then(resp => {
              if (resp.success) {
               this.form.edit.dialogFormVisible = false
               //重新加载表格
               kk.k_load_table(this, 'upload_table', 'file')
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      copyObj(obj1, obj2) {
        for (var key in obj1) {
          // 原型对象不拷贝
          if (key === '__proto__') {
            continue
          }
          // 不存在的属性不拷贝
          if (!obj2.hasOwnProperty(key)) {
            continue
          }
          // 自动将number转换成string
          if (typeof obj1[key] === 'number') {
            obj1[key] = '' + obj1[key]
          }
          obj2[key] = obj1[key]
        }
      },
    }
  }
</script>

<style scoped>
  /*让文本可以被选中*/
  .venus-list-page {
    -moz-user-select: text;
    /*火狐*/
    -webkit-user-select: text;
    /*webkit浏览器*/
    -ms-user-select: text;
    /*IE10*/
    -khtml-user-select: text;
    /*早期浏览器*/
    user-select: text;
  }
</style>
